<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
  <meta name="referrer" content="origin-when-cross-origin">
  <!--
    Preconnect to essential domains
  -->
  <link rel="preconnect" href="https://bsky.social">
  <link rel="preconnect" href="https://bsky.network">
  <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>

  <!-- Hello Humans! API docs at https://atproto.com -->

  <style>
    /**
     * Extend the react-native-web reset:
     * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
     */
    html,
    body,
    #root {
      width: 100%;
      /* To smooth any scrolling behavior */
      -webkit-overflow-scrolling: touch;
      margin: 0px;
      padding: 0px;
      /* Allows content to fill the viewport and go beyond the bottom */
      min-height: 100%;
    }
    #root {
      flex-shrink: 0;
      flex-basis: auto;
      flex-grow: 1;
      display: flex;
      flex: 1;
    }

    html {
      /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
      -webkit-text-size-adjust: 100%;
      height: calc(100% + env(safe-area-inset-top));
      scrollbar-gutter: stable both-edges;
    }
    html, body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
    }

    #preload {
      width: 100px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    /* Buttons and inputs have a font set by UA, so we'll have to reset that */
    button, input, textarea {
      font: inherit;
      line-height: inherit;
    }

    /* Color theming */
    /* Default will always be white */
    :root {
        --text: black;
        --background: white;
        --backgroundLight: hsl(211, 20%, 95%);
    }
    /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
    @media (prefers-color-scheme: dark) {
        :root {
            --text: white;
            --background: black;
            --backgroundLight: hsl(211, 20%, 20%);
            color-scheme: dark;
        }
    }

    /* Overwrite those preferences with the selected theme */
    html.theme--light {
        --text: black;
        --background: white;
        --backgroundLight: hsl(211, 20%, 95%);
    }
    html.theme--dark {
        --text: white;
        --background: black;
        --backgroundLight: hsl(211, 20%, 20%);
        color-scheme: dark;
    }
    html.theme--dim {
        --text: white;
        --background: hsl(211, 20%, 4%);
        --backgroundLight: hsl(211, 20%, 10%);
        color-scheme: dark;
    }

    /* Remove autofill styles on Webkit */
    input:autofill,
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active{
        -webkit-background-clip: text;
        -webkit-text-fill-color: var(--text);
        transition: background-color 5000s ease-in-out 0s;
        box-shadow: inset 0 0 20px 20px var(--background);
        background: var(--background);
        color: var(--text);
    }
    /* Force left-align date/time inputs on iOS mobile */
    input::-webkit-date-and-time-value {
      text-align: left;
    }

    body {
      display: flex;
      /* Allows you to scroll below the viewport; default value is visible */
      overflow-y: auto;
      overscroll-behavior-y: none;
      text-rendering: optimizeLegibility;
      background-color: var(--background);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: scrollbar;
      font-synthesis-weight: none;
    }

    /* Remove default link styling */
    a {
      color: inherit;
    }
    a[role="link"]:hover {
      text-decoration: underline;
    }
    a[role="link"][data-no-underline="1"]:hover {
      text-decoration: none;
    }

    /* Styling hacks */
    *[data-word-wrap] {
      word-break: break-word;
    }
    *[data-stable-gutters] {
      scrollbar-gutter: stable both-edges;
    }

    /* ProseMirror */
    .ProseMirror {
      font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
      min-height: 140px;
    }
    .ProseMirror-dark {
      color: white;
    }
    .ProseMirror p {
      margin: 0;
    }
    .ProseMirror p.is-editor-empty:first-child::before {
      color: #8d8e96;
      content: attr(data-placeholder);
      float: left;
      height: 0;
      pointer-events: none;
    }
    .ProseMirror .mention {
      color: #0085ff;
    }
    .ProseMirror a,
    .ProseMirror .autolink {
      color: #0085ff;
    }
    /* OLLIE: TODO -- this is not accessible */
    /* Remove focus state on inputs */
    .ProseMirror-focused {
      outline: 0;
    }
    textarea:focus,
    input:focus {
      outline: 0;
    }
    .tippy-content .items {
      width: fit-content;
    }

    /* Tooltips */
    [data-tooltip] {
      position: relative;
      z-index: 10;
    }
    [data-tooltip]::after {
      content: attr(data-tooltip);
      display: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateY(100%) translateY(8px) translateX(-50%);
      padding: 4px 10px;
      border-radius: 10px;
      background: var(--backgroundLight);
      color: var(--text);
      text-align: center;
      white-space: nowrap;
      font-size: 12px;
      z-index: 10;
    }
    [data-tooltip]::before {
      content: '';
      display: none;
      position: absolute;
      border-bottom: 6px solid var(--backgroundLight);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      bottom: 0;
      left: 50%;
      transform: translateY(100%) translateY(2px) translateX(-50%);
      z-index: 10;
    }
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
      display:block;
    }

    /* NativeDropdown component */
    .radix-dropdown-item:focus,
    .nativeDropdown-item:focus {
      outline: none;
    }

    /* Spinner component */
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .rotate-500ms {
      position: absolute;
      inset:0;
      animation: rotate 500ms linear infinite;
    }

    @keyframes avatarHoverFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes avatarHoverFadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    .force-no-clicks > *,
    .force-no-clicks * {
      pointer-events: none !important;
    }
  </style>
  </style>
  {% include "scripts.html" %}
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
  <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#1185fe">
  <meta name="theme-color">
  <meta name="application-name" content="Bluesky">
  <meta name="generator" content="bskyweb">
  <meta property="og:site_name" content="Bluesky Social" />
  <link type="application/activity+json" href="" />

  {% block html_head_extra -%}{%- endblock %}
</head>
<body>
{%- block body_all %}
  <div id="root">
    <div id="preload">
      <!-- Bluesky SVG -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
    </div>
  </div>

  <noscript>
    <h1 lang="en">JavaScript Required</h1>
    <p lang="en">This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
    <p lang="en">Learn more about Bluesky at <a href="https://bsky.social">bsky.social</a> and <a href="https://atproto.com">atproto.com</a>.
    {% block noscript_extra %}{% endblock %}
  </noscript>
{% endblock -%}
</body>
</html>
